import  React, { useEffect, useMemo, useState } from "react";
import { Collapse, Menu } from "antd";
import type { CollapseProps } from 'antd';
import styles from "./styles.module.scss";
import {
    DashboardOutlined,
    FileImageOutlined,
    ScheduleOutlined,
    FilePdfOutlined,
    PlaySquareOutlined,
    PlayCircleOutlined,
    FolderOutlined
  } from '@ant-design/icons';

import type { GetProp, MenuProps } from 'antd';
import { LibAppView } from "@/lib";
import { useFileApi } from "./Context";

type MenuTheme = GetProp<MenuProps, 'theme'>;

type MenuItem = GetProp<MenuProps, 'items'>[number];


const Category = LibAppView.withService({
    "reqEndPoints": [
        {
            endPoint: "files.folders",
            name: "folders"
        }
    ]
})((props) => {
    const fileApi = useFileApi();
    const [folderList, setFolderList ] = useState(() => {
        const folderListData = (props.responseData as any)?.folders?.data ?? [];
        return folderListData.map((item: any) => {
            return {
                key: item,
                label: item,
                icon: <FolderOutlined />
            }
        });
    });
    const items: MenuItem[] = useMemo(() => ([
        {
            key: 'type',
            icon: <DashboardOutlined />,
            label: '文件类型',
            children: [
                { key: 'image', label: '图片', icon: <FileImageOutlined />},
                { key: 'video', label: '视频', icon: <PlayCircleOutlined /> },
                { key: 'audio', label: '音频', icon: <PlaySquareOutlined /> },
                { key: 'pdf', label: 'PDF文件', icon: <FilePdfOutlined /> }
            ].filter((value) => {
                return fileApi.filterType && fileApi.filterType.length > 0 ? value.key === fileApi.filterType : true;
            })
        },
        {
            key: 'folder',
            icon: <ScheduleOutlined />,
            label: '日期',
            children: folderList
        }
         
    ]), [folderList, fileApi.filterType]);
    
    const onChange = (items: any) => {
        const fieldName = items.keyPath[1];
        const resetName = fieldName === 'type' ? 'folder' : 'type';
        fileApi.search({
            ...fileApi.searchData,
            [resetName]: null,
            [fieldName]: items.key
        });
        if(resetName === 'folder') {
            props.withServiceApi.send({
                endPoint: "files.folders",
                uri: {
                    fileType: items.key
                }
            }).then((resp: any) => {
                const folderListData = resp?.data ?? [];
                const newFolderList = folderListData.map((item: any) => {
                    return {
                        key: item,
                        label: item,
                        icon: <FolderOutlined />
                    }
                });
                setFolderList(newFolderList);
                console.log(newFolderList);
            }).catch((err) => {
                console.error(err);
            });
        }
    };

    useEffect(() => {
        if(folderList.length === 0) {
            const folderListData = (props.responseData as any)?.folders?.data ?? [];
            const newFolderList = folderListData.map((item: any) => {
                return {
                    key: item,
                    label: item,
                    icon: <FolderOutlined />
                }
            });
            setFolderList(newFolderList);
        }
    }, [props.responseData]);

    const selectedKey = useMemo(() => {
        return fileApi.filterType ? ['type', fileApi.filterType] : ['type'];
    }, [])

    return (<div className={styles.categoryWrapper}>
        <Menu
            defaultSelectedKeys={selectedKey}
            defaultOpenKeys={['type']}
            items={items}
            mode="inline"
            inlineIndent={12}
            onClick={onChange}
      />
    </div>);
});

export default Category;
